<template>
    <div class="main user-layout-register">
        <div class="container">
            <a-row>
                <a-col :span="7"/>
                <a-col :span="10" >
                    <div style="background-color: #FFFFFF;">
                    <h3><span>注册</span></h3>
                    <a-form ref="formRegister" :form="form" id="formRegister">
                        <a-form-item>
                            <a-input size="large"
                                     type="text"
                                     placeholder="用户名"
                                     v-decorator="['username', {rules: [{ required: true, message: '请输入用户名 ' }], validateTrigger: ['change', 'blur']}]"
                            />
                        </a-form-item>

                        <a-popover
                                placement="rightTop"
                                :trigger="['focus']"
                                :getPopupContainer="(trigger) => trigger.parentElement"
                                v-model="state.passwordLevelChecked">
                            <template slot="content">
                                <div :style="{ width: '240px' }" >
                                    <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
                                    <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
                                    <div style="margin-top: 10px;">
                                        <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
                                    </div>
                                </div>
                            </template>
                            <a-form-item>
                                <a-input
                                        size="large"
                                        type="password"
                                        @click="handlePasswordInputClick"
                                        autocomplete="false"
                                        placeholder="至少8位密码，区分大小写"
                                        v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
                                />
                            </a-form-item>
                        </a-popover>

                        <a-form-item>
                            <a-input
                                    size="large"
                                    type="password"
                                    autocomplete="false"
                                    placeholder="确认密码"
                                    v-decorator="['password2', {rules: [{ required: true, message: '至少8位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
                            />
                        </a-form-item>

                        <a-form-item>
                            <a-input size="large"
                                     type="text"
                                     placeholder="邮箱"
                                     v-decorator="['email', {rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }],
                                     validateTrigger: ['change', 'blur']}]"
                            />
                        </a-form-item>


                        <a-row :gutter="16">
                            <a-col class="gutter-row" :span="16">
                                <a-form-item>
                                    <a-input size="large" type="text" placeholder="验证码" v-decorator="['code', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
                                        <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                                    </a-input>
                                </a-form-item>
                            </a-col>
                            <a-col class="gutter-row" :span="8">
                                <a-button
                                        class="getCaptcha"
                                        size="large"
                                        :disabled="state.smsSendBtn"
                                        @click="getEmailcode"
                                        v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"/>
                            </a-col>
                        </a-row>

                        <a-form-item>
                            <a-button size="large" type="primary"
                                      htmlType="submit"
                                      class="register-button"
                                      :loading="registerBtn"
                                      @click.stop.prevent="handleSubmit"
                                      :disabled="registerBtn">注册
                            </a-button>
                            <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
                        </a-form-item>

                    </a-form>

                  </div>
                </a-col>
                <a-col :span="7"/>
            </a-row>
        </div>
        <myfooter/>
    </div>

</template>

<script>
    import myfooter from "@/components/unit/footer";
    import {getCode,regUser} from "@/api/login"
    const levelNames = {
        0: '低',
        1: '低',
        2: '中',
        3: '强'
    };
    const levelClass = {
        0: 'error',
        1: 'error',
        2: 'warning',
        3: 'success'
    };
    const levelColor = {
        0: '#ff0000',
        1: '#ff0000',
        2: '#ff7e05',
        3: '#52c41a'
    };
    export default {
        name: "register",
        components: {
            myfooter,
        },
        data(){
            return{
                form: this.$form.createForm(this),
                state: {
                    time: 60,
                    smsSendBtn: false,
                    passwordLevel: 0,
                    passwordLevelChecked: false,
                    percent: 10,
                    progressColor: '#FF0000'
                },
                registerBtn: false
            }
        },computed: {
            passwordLevelClass () {
                return levelClass[this.state.passwordLevel]
            },
            passwordLevelName () {
                return levelNames[this.state.passwordLevel]
            },
            passwordLevelColor () {
                return levelColor[this.state.passwordLevel]
            }
        },
        methods: {
            handlePasswordLevel (rule, value, callback) {
                let level = 0;

                // 判断这个字符串中有没有数字
                if (/[0-9]/.test(value)) {
                    level++
                }
                // 判断字符串中有没有字母
                if (/[a-zA-Z]/.test(value)) {
                    level++
                }
                // 判断字符串中有没有特殊符号
                if (/[^0-9a-zA-Z_]/.test(value)) {
                    level++
                }
                this.state.passwordLevel = level;
                this.state.percent = level * 30;
                if (level >= 2) {
                    if (level >= 3) {
                        this.state.percent = 100
                    }
                    callback()
                } else {
                    if (level === 0) {
                        this.state.percent = 10
                    }
                    callback(new Error('密码强度不够'))
                }
            },

            handlePasswordCheck (rule, value, callback) {
                const password = this.form.getFieldValue('password');
               // console.log('value', value);
                if (value === undefined) {
                    callback(new Error('请输入密码'))
                }
                if (value && password && value.trim() !== password.trim()) {
                    callback(new Error('两次密码不一致'))
                }
                callback()
            },



            handlePasswordInputClick () {
                if (!this.isMobile) {
                    this.state.passwordLevelChecked = true;
                    return
                }
                this.state.passwordLevelChecked = false
            },

            handleSubmit () {
                const { form: { validateFields }, state, $router,$notification } = this;
                validateFields({ force: true }, (err,values) => {
                    if (!err) {
                        state.passwordLevelChecked = false;
                        //console.log(values)
                        const regParams = { ...values }

                        regParams.username= values.username
                        regParams.password = values.password
                        regParams.email=values.email
                        regParams.code=values.code
                        regUser(regParams).then(()=> {

                            $notification['success']({
                                message: '提示',
                                description: '注册成功，返回登录界面',
                                duration: 8
                            })
                            $router.push({ name: 'login' })
                        }).catch(err => {

                            this.requestFailed(err)
                        })


                    }
                })
            },
            getEmailcode (e) {
                e.preventDefault()
                const { form: { validateFields }, state, $message, $notification } = this

                validateFields(['email'], { force: true },
                    (err, values) => {
                        if (!err) {
                            state.smsSendBtn = true

                            const interval = window.setInterval(() => {
                                if (state.time-- <= 0) {
                                    state.time = 60
                                    state.smsSendBtn = false
                                    window.clearInterval(interval)
                                }
                            }, 1000)

                            const hide = $message.loading('验证码发送中..', 0)

                             getCode({email: values.email }).then(()=> {
                                setTimeout(hide, 2500)
                                $notification['success']({
                                    message: '提示',
                                    description: '验证码获取成功，',
                                    duration: 8
                                })
                            }).catch(err => {
                                setTimeout(hide, 1)
                                clearInterval(interval)
                                state.time = 60
                                state.smsSendBtn = false
                                this.requestFailed(err)
                            })
                        }
                    }
                )
            },


            requestFailed (err) {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
                    duration: 4
                });
                this.registerBtn = false
            }
        },
        watch: {
            'state.passwordLevel' () {
                //console.log(val)
            }
        }
    }
</script>

<style scoped>
    .main{
        width: 100%;
        min-width: 1200px;
        min-height: 100%;
        height: 100%;
        background-size: 100%;
        padding: 110px 0 144px;
        position: relative;
        background: #0c3eff url(~@/assets/background.svg) no-repeat 50% 50%;

    }
    .container{
        width: 80%;
        min-height: 50%;
        min-width: 1200px;

    }

    .container{
        margin-left: 140px;
    }
     #formRegister{
         width: 80%;
         margin:0 10%;
         padding-bottom: 20px;
     }
    .user-layout-register h3{
        margin-bottom: 20px;
        width: 100%;
        padding-top: 20px;
        text-align: center;
        font-size: 2.25rem;
        font-weight: 300;
        line-height: 1.5;
    }
    .user-layout-register .getCaptcha {
        display: block;
        width: 100%;
        height: 40px;
    }

    .user-layout-register  .register-button {
        width: 50%;
    }

    .user-layout-register .login {
        float: right;
        line-height: 40px;
    }

    .user-register .error {
        color: #ff0000;
    }
    .user-register .warning {
        color: #ff7e05;
    }
    .user-register .success {
        color: #52c41a;
    }
 .logo_div {
     width:100%;
     height:400px;
     margin-left: 60px;

     background-image: url("../assets/iot.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
 }
    .logo_div h3{
        position:relative;
        font-size: 2.25rem;
        font-weight: 300;
        line-height: 1.5;
        color: #2c3e50;
        width: 100%;
        text-align: center;
      padding-top: 100px;
    }
    .logo_div p{
        color: #adb5bd !important;
        font-size: 1.14rem;
        font-weight: 400;
        margin-top: 0;
        margin-bottom: 1rem;
        text-align: center;

    }
</style>
